<template>
  <div>
    <div>
      <el-form :inline="true" >
        <el-form-item >
          <el-input
            placeholder="请输入系列名称"
            v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="getMainListReset" ><i class="iconfont icon-search"></i>查询</el-button>
          <el-button type="primary" size="medium" @click="goto('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="series_id"
          width="50">
        </el-table-column>
        <el-table-column
          label="图片"
          width="200"
        >
          <template slot-scope="scope">
            <img class="categoryimg" v-if="scope.row.series_img" :src="imgUrl+scope.row.series_img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="series_name"
          label="系列名称"
        >
        </el-table-column>
        <el-table-column
          label="是否显示"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{showList[scope.row.is_show]}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="role_name"
          label="排序"
        >
          <template slot-scope="scope">
            <p>
              <i class="iconfont icon-arrowsupline bigicon" :class="scope.$index===0 ? 'c999' : 'blue'" @click="rankUp(mainList, scope.$index)"></i>
              <i class="iconfont icon-arrowsdownline bigicon" :class="scope.$index === mainList.length - 1 ? 'c999' : 'blue'" @click="rankDown(mainList, scope.$index)"></i>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination>
    </div>

    <!-- // 添加编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="系列名称"  prop="series_name">
          <el-input placeholder="请输入" v-model="form.series_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介"  prop="series_subtitle">
          <el-input placeholder="请输入" v-model="form.series_subtitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" >
          <upimg :imgs.sync="imgs" :ismultiple="false"/>
        </el-form-item>
        <el-form-item label="状态" >
          <el-radio-group v-model="form.is_show">
            <el-radio v-for="(item, key) in showList" :key="key" :label="key">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSeriesPageList, addOrModifySeries, rankSeries, deleteSeries} from 'api/lineManagement/seriesMgAPI'
import config from 'api/config'
import { pageSizeArr } from 'common/config/constConfig'
import upimg from 'components/upimg/upimg'

export default {
  components: {
    upimg
  },
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加系列'
      }else{
        return '编辑系列'
      }
    }
  },
  data() {
    return {
      dialogMode: 'add',
      showList: {
        1: '显示',
        0: '不显示',
      },
      dialogFormVisible: false,
      form: {},
      pageSizeArr,
      queryObj: {},
      rules: {
        series_name: [
          { required: true, message: '请输入系列名', trigger: 'blur' }
        ],
        series_subtitle: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ]
      },
      imgUrl: config.imgUrl,
      imgs: [],
      mainList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    }
  },
  methods: {
    goto(row) {
      this.form = {is_show: '1'}
      this.dialogMode = 'add'
      this.dialogFormVisible = true
      if(row) {
        this.form = {...row}
        this.form.is_show = '' + this.form.is_show
        this.imgs = this.form.series_img.split(',')
        this.dialogMode = 'edit'
      }
    },
    doAction() {
      let data = {...this.form}
      data.series_img = this.imgs.join(',')
      addOrModifySeries(data).then(() => {
        this._caozuoAfter('操作成功')
      })
    },
    rankUp(arr, index){
      if(index === 0){
        return
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].series_id
      sendObj.other_id = arr[index - 1].series_id
      this._rank(sendObj)
    },
    rankDown(arr, index){
      let len = arr.length
      if(len-1 === index){
        return 
      }
      let sendObj = {}
      sendObj.curr_id = arr[index].series_id
      sendObj.other_id = arr[index + 1].series_id
      this._rank(sendObj)
    },
    _rank(data){
      rankSeries(data).then(res => {
        if(res){
          this._caozuoAfter('操作成功')
        }
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      deleteSeries(row.series_id).then(res => {
        this._caozuoAfter(res.rMsg)
      })
    },
    _caozuoAfter(msg){
      this.dialogFormVisible = false
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    getMainListReset(){
      this.page.page = 1
      this._mainList()
    },
    // 获取
    _mainList(){
      let data = {...this.queryObj}
      data.pageInfo = {...this.page}
      getSeriesPageList(data).then(res => {
        let pageInfo = res.pageInfo
        this.page.total = pageInfo.Total
        this.page.page = pageInfo.page
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>

<style lang="scss" scoped>
.icon-arrowsupline, .icon-arrowsdownline{
  cursor: pointer;
}
.categoryimg{
  height: 80px;
}
.c999{
  color: #999;
}
.bigicon{
  font-size: 22px;
  font-weight: bold;
}
.blue{
  color: #409EFF;
}

</style>
